<template>
  <div class="stock flex column shrink">
    <yn-common-title name="股友自选">
      <div slot="icon">
        <img :src="PIC_URL + '/tlbypcWeb/home/gyzx.png'" />
      </div>
    </yn-common-title>
    <div class="contents flex column">
      <table>
        <thead class="shrink">
          <tr class="head">
            <td class="index">序号</td>
            <td class="code">股票代码</td>
            <td class="name">股票名称</td>
            <td class="increame">当日最高涨幅</td>
          </tr>
        </thead>
        <tbody class="grow">
          <tr
            v-for="(item, i) in list"
            :key="i"
            class="item"
            @click="stockDetail(item.exchangeSymbols, item.stockCode)"
          >
            <td class="index">{{ i + 1 }}</td>
            <td class="code">{{ item.stockCode }}</td>
            <td class="name">{{ item.stockName }}</td>
            <td
              class="increame"
              :class="{ green: item.changes < 0, red: item.changes > 0 }"
            >
              {{ item.changes }}%
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import title from "../common/title";
import { getStocks } from "../../api/index";

export default {
  data() {
    return {
      list: [],
    };
  },
  async mounted() {
    await getStocks().then((back) => {
      if (back.status == 1) {
        this.list = back.data;
      }
    });
  },
  components: { "yn-common-title": title },
  methods: {
    stockDetail(type, code) {
      type = type == "SS" ? "1" : "0";
      window.prompt(
        "",
        `up://["open.stock",${Date.now()},{"setcode":"${type}","code":"${code}","type":"首页"}]`
      );
    },
  },
};
</script>
<style>
.green {
  color: #0fba0f !important;
}
.red {
  color: #ea2827 !important;
}
</style>
<style scoped lang="scss">
.stock {
  overflow: hidden;
  background: #1c1d21;
  border: 1px solid #25262a;
  border-top: none;
  padding-bottom: 10px;
}
.contents {
  overflow: auto;
}
table {
  td {
    text-align: center;
    color: #bcbfc4;
  }
  thead {
    background: #25262a;
    td {
      line-height: 36px;
      font-size: 16px;
    }
  }
  tbody {
    td {
      line-height: 40px;
      font-size: 18px;
    }
  }
  width: 100%;

  .item:hover {
    background: #323337;
    cursor: pointer;
  }
}
</style>
